<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>推箱子</title>
    <link rel="icon" href="imgs/player.png">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: space-around;
        }
        .level {
            text-align: center;
        }
        .wall {
            background-image: url(imgs/wall.jpg);
        }
        .player {
            background-image: url(imgs/player.png);
        }
        .box0 {
            background-image: url(imgs/box.png);
        }
        .box1 {
            background-image: url(imgs/over_box.png);
        }
        .correct {
            box-sizing: border-box;
            border: 1px solid #21e921;
            box-shadow: inset 0 0 2px #21e921,
                inset 0 0 4px #21e921,
                inset 0 0 6px #21e921,
                inset 0 0 8px #21e921;
        }
        #game {
            position: relative;
            margin-top: 20px;
        }
        #game>div {
            position: absolute;
            width: 45px;
            height: 45px;
            background-size: 100%;
        }
    </style>
</head>

<body>
    <div>
        <h1 class="level">第 1 关</h1>
        <div id="game"></div>
    </div>
    <div class="container">
        <div class="bg"></div>
        <div class="song-info">
            <div class="cover-img">
                <img src="./source/song_2.jpg" alt="">
            </div>
            <h3 class="name"></h3>
            <div class="singer"></div>
            <div class="album"></div>
        </div>
        <div class="progress">
            <span class="cur-time">00:00</span>
            <div class="progress-bar">
                <input type="range" min="0" max="100" step="0.2">
            </div>
            <span class="total-time"></span>
        </div>
        <footer>
            <div class="like-btn"></div>
            <div class="prev-btn"></div>
            <div class="play-btn"></div>
            <div class="next-btn"></div>
            <div class="list-btn"></div>
        </footer>
        <dl class="music-list">
            <dt>播放列表</dt>
            <dd class="close">关闭</dd>
        </dl>
    </div>
    <script src="./js/main.js" type="module"></script>
    <script src="./js/index.js" type="module"></script>
</body>

</html>